function Modal() {
    // 要有一个遮罩
    this.mask = document.createElement('div')
    // 在body中显示遮罩
    document.body.appendChild(this.mask)
    // 设置样式
    this.setStyle(this.mask, {
        width: '100%',
        height: '100%',
        position: 'absolute',
        left: 0,
        top: 0,
        backgroundColor: 'rgba(0,0,0,0.7)'
    })
    // 要有一个提示内容从上向下滑动下来
    // 创建一个盒子
    this.box = document.createElement('div')
    // 设置样式
    this.setStyle(this.box, {
        width: '20%',
        height: '150px',
        backgroundColor: '#fff',
        position: 'absolute',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%,-50%)',
        textAlign: 'center',
        fontSize: '20px'
    })
    // 将盒子放在遮罩中
    this.mask.appendChild(this.box)
    // 给盒子中放文字
    this.box.innerText = '默认的提示信息！'
    // 获取div高度
    var h = this.box.clientHeight
    // 设置行高
    this.box.style.lineHeight = h + 'px'
    // 判断成功或失败设置绿色或红色
    this.box.style.color = status ? '#0f0' : '#f00'
    
    
}
// 原型上添加msg方法
Modal.prototype.msg = function(text, seconds) {
    this.box.innerText = text
    // 设置box在最顶端
    this.box.style.top = -this.box.offsetHeight + 'px'
    this.box.style.height = 'auto'
    this.box.style.lineHeight = '50px'
    this.box.style.borderRadius = '15px'
    // 设置动画效果到居中的位置
    animate(this.box, {
        top: this.mask.offsetHeight / 2 - this.box.offsetHeight / 2
    }, () => {
        setTimeout(() => {
            this.mask.remove()
        }, seconds)
    })
}
// 原型中添加confirm方法
Modal.prototype.confirm = function(text, yesDo = function() {}, noDo = function() {}) {
    // 给盒子中放文字
    this.box.innerText = text
    // 创建按钮
    this.yesBtn = document.createElement('span')
    // 设置文字
    this.yesBtn.innerText = '确定'
    // 设置样式
    this.setStyle(this.yesBtn, {
        position: 'absolute',
        right: '6px',
        bottom: '6px',
        width: '50px',
        height: '30px',
        backgroundColor: '#0ff',
        color: '#fff',
        lineHeight: '30px',
        fontSize: '14px',
        cursor: 'pointer'
    })
    // 把按钮放在盒子中
    this.box.appendChild(this.yesBtn)
    // 点击确定按钮关闭弹窗
    this.yesBtn.onclick = () => {
        this.mask.remove()
        yesDo()
    }

    // 创建取消按钮
    this.noBtn = document.createElement('b')
    this.noBtn.innerText = '取消'
    this.noBtn.onclick = () => {
        this.mask.remove()
        noDo()
    }
    this.box.appendChild(this.noBtn)
    this.setStyle(this.noBtn, {
        'font-weight': 'normal',
        'position': 'absolute',
        'font-size': '14px',
        'background-color': '#f00',
        'color': '#fff',
        'width': '50px',
        'height': '30px',
        'line-height': '30px',
        'right': '66px',
        'bottom': '6px',
        cursor: 'pointer'
    })
}
// 原型中添加alert方法
Modal.prototype.alert = function(text, status) {
    // 给盒子中放文字
    this.box.innerText = text
    // 创建按钮
    this.yesBtn = document.createElement('span')
    // 设置文字
    this.yesBtn.innerText = '确定'
    // 设置样式
    this.setStyle(this.yesBtn, {
        position: 'absolute',
        right: '6px',
        bottom: '6px',
        width: '50px',
        height: '30px',
        backgroundColor: '#0ff',
        color: '#fff',
        lineHeight: '30px',
        fontSize: '14px',
        cursor: 'pointer'
    })
    // 把按钮放在盒子中
    this.box.appendChild(this.yesBtn)
    // 点击确定按钮关闭弹窗
    this.yesBtn.onclick = () => this.mask.remove()
}
// 原型中添加批量设置样式的方法
Modal.prototype.setStyle = function(ele, obj) {
    for(var key in obj) {
        ele.style[key] = obj[key]
    }
}